<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="chess.Player"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hall</title>
<style>
	body{
		background:url("image/bg.jpg") -100px -400px;
	}
	#main{
		position:absolute;
		left:1px;
		top:1px;
	}
	#myInfoPanel{
		position:absolute;
		left:0px;
		top:0px;
		width:595px;
		height:80px;
		border:1px solid gray;
		padding:20px;
	}
	#roomListPanel,#listp1,#listp2{
		scrollbar-base-color:gray;
		scrollbar-arrow-color:white;
		overflow-y:scroll;
		
	}
	#roomListPanel{
		position:absolute;
		left:0px;
		top:85px;
		width:590px;
		height:673px;
		border:5px outset white;
		background-color:#eeeeee;
		/*
		background:url("image/brick.png");
		*/
	}
	#userListPanel{
		position:absolute;
		left:600px;
		top:0px;
		width:185px;
		height:760px;
		background:#CBEBFE;
		border:3px outset white;
	}
	
	#listp1{
		height:555px;
		border:1px solid gray;
	}
	#listp2{
		height:200px;
		border:1px solid gray;
		border-top:none;
	}
	
	.info{
		width:165px;
		overflow:hidden;
		display:none;
	}
	.info span{
		color:orange;
	}
	.seat{
		width:32px;
		height:32px;
		border:2px outset white;
		padding:4px;
	}
	.tbl{
		border:2px outset white;
	}
	.room{
		display:none;
		position:absolute;
	}
</style>
<script  src="js/util.js"></script>
<script  src="js/gamehall.js"></script>
<script  src="js/ajax.js"></script>

<%Player me = (Player)(request.getAttribute("me"));%>
<script>
    var pid = '<%=me.getId()%>';
    var pname = '<%=me.getUsername()%>';
    
</script>
</head>
<body onload="GameHall.init()" oncontextmenu="return false">
<div id="main">
	<div id="myInfoPanel"></div>
	<div id="roomListPanel"></div>
	<div id="userListPanel">
		<div id="listp1"></div>
		<div id="listp2"></div>
	</div>
</div>

<div id="tmp4player" class="info">
	<table>
		<tr><td rowspan=2><img src="image/portrait.png" widht=40 height=40></td><td><span>dummy</span></td></tr>
		<tr><td>[ <span>dummy</span> ]</td></tr>
	</table>
</div>

<div id="tmp4room" class="room">
	<table>
		<tr>
			<td style="
		cursor:hand;"><img class="seat" src='image/placeholder.png'><div>&nbsp;</div></td>
			<td><img class="tbl" src='image/table2.png' width=60 height=60></td>
			<td style="
		cursor:hand;"><img class="seat" src='image/placeholder.png'><div>&nbsp;</div></td>
		</tr>
	</table>
</div>
</body>
</html>